<template>
  <div class="Chart">
    <div class="chart_tips">
      <Breadcrumb :dataList="breadcrumbList"></Breadcrumb>
    </div>
    <div class="chart_amap">
      <Amap
        ref="chartAmap"
        :navaidAllInfor="getNavaidInfo.info"
        :channelInfo="getChannelInfo.info"
        :chartPortInfoList="getPortInfo.info"
        :chartBoundsList="getPortInfo.bounds"
        :chartBerthInfo="getBerthInfo.info"
        :clickNavaidInfo="clickNavaidInfo.info"
        :clickPortInfo="clickPortInfo.info"
        :clickBearthInfo="clickBearthInfo.info"
        :manualAddArray="autoPathInfo.channel"
        :isClick="amapInfo.isClick"
        :chartStartLocation="autoPathInfo.isStartDate"
        :chartEndLocation="autoPathInfo.isEndDate"
        @markerInfoClearAmap="markerInfoClearFun"
        @setVueMapBounds="setVueMapBoundsFun"
        @channelDeleteArray="clickNavaidFun"
        @clickPortInfoAmap="clickPortInfoFun"
        @clickBearthInfoAmap="clickBearthInfoFun"
        @LngLat="clickAmapFun"
        @ViewLocation="draggableMarkerFun"
        @chartMouseAmap="chartMouseFun"
      ></Amap>
      <div class="chart_amapButton" title="按钮操作">
        <el-button type="primary" @click="autoPathShow(true)" v-show="!autoPathInfo.dialog"
          >路径规划预览</el-button
        >
        <el-button type="primary" @click="autoPathShow(false)" v-show="autoPathInfo.dialog"
          >关闭路径规划</el-button
        >
      </div>
      <!-- 搜索组件使用 -->
      <div class="chart_amap_getinfo" title="搜索组件">
        <getInfoSearch :searchInfo="searchInfo" :setSearchFun="getInfoFun"></getInfoSearch>
      </div>
      <!-- 最优路径规划航道组件 -->
      <div class="chart_amap_autoPath" title="最优路径规划" v-show="autoPathInfo.dialog">
        <autoPath
          :isStartIdent="autoPathInfo.isStartIdent"
          :isStart="autoPathInfo.isStart"
          :isStartDate="autoPathInfo.isStartDate"
          :isEndIdent="autoPathInfo.isEndIdent"
          :isEnd="autoPathInfo.isEnd"
          :addReouterStartClick="addReouterStartClick"
          :addReouterEndClick="addReouterEndClick"
          :startRadius="autoPathInfo.startRadius"
          @inputChange="inputChangeFun"
        ></autoPath>
        <div class="chart_amap_autoPath_is">
          <el-button type="primary" class="button_padding" plain @click="autoPathClickFalse()"
            >取消</el-button
          >
          <el-button type="primary" class="button_padding" plain @click="autoPathClickTrue()"
            >确定</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Breadcrumb from 'common/Breadcrumb';
import Amap from '@/amap/Amaps.vue';
import getInfoSearch from '@/components/chart/getInfoSearch.vue';
import autoPath from '@/components/common/pathPlan/autoPath.vue';

import { debounce, trun, floatSix, trunBounds } from '@/utils/common';
import enums from '@/utils/enums';
import BreadcrumbVue from '../../../../components/common/Breadcrumb.vue';
export default {
  name: 'Chart',
  components: {
    Breadcrumb,
    Amap,
    getInfoSearch,
    autoPath,
  },
  props: {},
  data() {
    return {
      // 当前页面
      breadcrumbList: ['航图展示'],
      // 登录用户的角色
      role: window.localStorage.role,
      // 地图信息
      amapInfo: {
        vueMapLocation: {
          TopLeft: [],
          TopRight: [],
          BottomLeft: [],
          BottomRight: [],
        },
        zoomSize: '',
        // 东北角
        northeast: [],
        // 西南角
        southwest: [],
        // 地图面积
        area: null,
        // 是否可点击
        isClick: false,
      },

      // 航点信息
      getNavaidInfo: {
        type: 1,
        searchKeyWord: '',
        info: [],
      },
      // 航道信息
      getChannelInfo: {
        type: 2,
        searchKeyWord: '',
        info: [],
        // 去除重复的信息的坐标
        channelSetView: [],
        // 去除重复的信息的航道信息
        clearRepeatWaypointInfor: [],
      },
      // 港口信息
      getPortInfo: {
        type: 4,
        searchKeyWord: '',
        info: [], //portInfoList
        // 港口范围折线
        bounds: [], //boundsList
        // 港口圆
        circle: {}, //portCircle
      },
      // 泊位信息
      getBerthInfo: {
        type: 8,
        searchKeyWord: '',
        info: [], //berthInfoList
        id: [],
      },

      // 点击航标信息
      clickNavaidInfo: {
        info: {},
      },
      // 点击航道信息
      clickChannelInfo: {
        info: [],
      },
      // 点击港口信息
      clickPortInfo: {
        info: {},
      },
      // 点击泊位信息
      clickBearthInfo: {
        info: {},
      },

      // 共用一个搜索框、
      search: {
        // 全局模糊查询条件
        condition: {
          keyword: '',
        },
        // 当前页数
        page: 1,
        // 一页上显示多少条
        size: 10,
        // 一次获取设置最大值
        maxSize: 2147483647,
        // 设置总分页数
        total: null,
      },

      // 搜索组件使用信息
      searchInfo: {
        // 可搜索信息
        info: [],
        //历史搜索记录
        history: [],
        // 航图搜索信息
        // chartSign:['航标','航道','港口','泊位'],
        chartSign: [
          { value: '航标', label: 1 },
          { value: '航道', label: 2 },
          { value: '港口', label: 4 },
          // { value: '泊位', label: 8 },
        ],
        // 已选择信息,默认选择航标
        chartSignSelect: [1],
        type: 0,
      },

      // 路径规划预览信息
      autoPathInfo: {
        dialog: false,
        isStartDate: {},
        isStartIdent: '',
        isStart: false,
        isEndDate: {},
        isEndIdent: '',
        isEnd: false,
        channel: [],
        startRadius: '500',
      },
    };
  },
  computed: {
    // 计算搜索总值
    searchInfoType() {
      return this.searchInfo.chartSignSelect.reduce((prev, item) => {
        return prev + item;
      }, 0);
    },
  },
  methods: {
    // =========================地图管理============================
    setVueMapBoundsFun(location, zoomSize) {
      let amapInfo = this.amapInfo;

      amapInfo.vueMapLocation = location;
      amapInfo.zoomSize = zoomSize;
      let path = [location.BottomRight, location.BottomLeft, location.TopLeft, location.TopRight];
      // 计算当前map视口面积
      amapInfo.area = Math.round(AMap.GeometryUtil.ringArea(path));
      // 获取当前港口面积用于计算
    },
    // 航图清除按钮
    markerInfoClearFun(type, all) {
      // 清除航标数据数据
      if (type == 1) {
        this.clickNavaidInfo.info = {};
      } else if (type == 4) {
        this.clickPortInfo.info = {};
      } else if (type == 8) {
        this.clickBearthInfo.info = {};
      }
      if (all) {
        this.clickNavaidInfo.info = {};
        this.clickPortInfo.info = {};
        this.clickBearthInfo.info = {};
      }
    },
    // 航标点击事件
    clickNavaidFun(data, Waypoint, flage) {
      //flage为true表示当前是拖动点击，值不赋值给路径规划
      if (this.autoPathInfo.dialog && !flage) {
        let autoPathInfo = this.autoPathInfo;
        if (!autoPathInfo.isStart) {
          Waypoint ? (autoPathInfo.isStartDate = Waypoint) : '';
          Waypoint ? (autoPathInfo.isStartIdent = Waypoint.ident) : '';
        } else if (autoPathInfo.isStart && !autoPathInfo.isEnd) {
          Waypoint ? (autoPathInfo.isEndDate = Waypoint) : '';
          Waypoint ? (autoPathInfo.isEndIdent = Waypoint.ident) : '';
        }
      }
      // 航标点击信息
      this.clickNavaidInfo.info = Waypoint;
      // 航道点击信息
      this.clickChannelInfo.info = data;
    },
    // 港口点击事件
    clickPortInfoFun(val) {
      this.clickPortInfo.info = val;
      // if (this.getPortInfo.bounds.length) {
      //   this.getBerthInfoFun(val.id);
      // }
    },
    // 泊位点击事件
    clickBearthInfoFun(val) {
      this.clickBearthInfo.info = val;
    },
    // 地图点击
    clickAmapFun(Waypoint) {
      let autoPathInfo = this.autoPathInfo;
      if (this.autoPathInfo.dialog) {
        if (!autoPathInfo.isStart) {
          Waypoint ? (autoPathInfo.isStartDate = Waypoint) : '';
          Waypoint && Waypoint.value ? (autoPathInfo.isStartIdent = Waypoint.value) : '';
        } else if (autoPathInfo.isStart && !autoPathInfo.isEnd) {
          Waypoint ? (autoPathInfo.isEndDate = Waypoint) : '';
          Waypoint && Waypoint.value ? (autoPathInfo.isEndIdent = Waypoint.value) : '';
        }
      }
    },
    // 点标记拖动修改经纬度
    draggableMarkerFun(Waypoint, inner) {
      let autoPathInfo = this.autoPathInfo;

      if (inner == '起') {
        Waypoint ? (autoPathInfo.isStartDate = Waypoint) : '';
        Waypoint && Waypoint.value ? (autoPathInfo.isStartIdent = Waypoint.value) : '';
      } else if (inner == '终') {
        Waypoint ? (autoPathInfo.isEndDate = Waypoint) : '';
        Waypoint && Waypoint.value ? (autoPathInfo.isEndIdent = Waypoint.value) : '';
      }
    },
    // 地图是否可点击
    chartMouseFun(flage) {
      this.amapInfo.isClick = !flage;
    },
    // 组件返回信息处理
    inputChangeFun(val) {
      this.autoPathInfo.startRadius = val;
    },
    // =======================地图管理结束============================

    // =========================信息获取============================
    // 键盘搜索函数
    async getInfoFun(searchVal, flag) {
      if (searchVal) {
        // 测试 搜索航道
        const { data: res } = await this.$http({
          method: 'GET',
          url: '/navigation/search',
          params: {
            'Condition.Type': this.searchInfoType,
            'Condition.Keyword': searchVal,
            Page: this.search.page,
            Size: this.search.size,
          },
        });
        if (!res.errorCode) {
          if (!flag) {
            this.searchInfo.info = res.data.result;
          } else {
            // this.search.condition.keyword = searchVal;
            let chartAmap = this.$refs.chartAmap;

            let dataType = res.data.result[0].type;
            switch (dataType) {
              case 1:
                // 航标信息，自动跳转，点击，地图放大
                res.data.result[0].navaid.location = trun(res.data.result[0].navaid.location);
                this.clickNavaidInfo.info = res.data.result[0].navaid;
                this.deGetNavaidLocationFun(true);
                break;
              case 2:
                // 航道信息，自动跳转点击，地图自适应
                let channelBoundsData = trunBounds(res.data.result[0].bounds);
                chartAmap.onCompleted(x =>
                  chartAmap.setVueMapBounds([
                    channelBoundsData[0],
                    channelBoundsData[channelBoundsData.length - 1],
                  ])
                );
                chartAmap.onCompleted(x => chartAmap.channelStyle(res.data.result[0], true));
                chartAmap.onCompleted(x => chartAmap.getVueMapBounds());
                break;
              case 4:
                // 港口信息
                let PortBoundsData = trunBounds(res.data.result[0].bounds);
                chartAmap.onCompleted(x =>
                  chartAmap.setVueMapBounds([
                    PortBoundsData[0],
                    PortBoundsData[PortBoundsData.length - 1],
                  ])
                );
                chartAmap.onCompleted(x => chartAmap.getVueMapBounds());
                break;
              case 8:
                // 泊位信息
                res.data.result[0].navaid.location = trun(res.data.result[0].navaid.location);
                chartAmap.setChartAmapCenter(
                  [navaid.location.longitude, navaid.location.latitude],
                  18
                );
                chartAmap.onCompleted(x => chartAmap.getVueMapBounds());
                break;
              case 16:
                // 标准程序端点
                break;
              case 32:
                // 进出口程序
                break;
              case 64:
                // 过渡路径
                break;
              default:
                console.log('没有指定信息');
            }
          }
        }
      } else {
        //  清空搜索
        this.searchInfo.info = [];
      }
    },
    // 航标搜索
    async getNavaidLocationFun(searchKeyWord = this.getNavaidInfo.searchKeyword) {
      const { data: res } = await this.$http({
        method: 'GET',
        url: '/navaid/search',
        params: {
          'Condition.Keyword': searchKeyWord,
          'Condition.Rect.TopLeft': trun(this.amapInfo.vueMapLocation.TopLeft),
          'Condition.Rect.TopRight': trun(this.amapInfo.vueMapLocation.TopRight),
          'Condition.Rect.BottomLeft': trun(this.amapInfo.vueMapLocation.BottomLeft),
          'Condition.Rect.BottomRight': trun(this.amapInfo.vueMapLocation.BottomRight),
          'Condition.ZoomLevel': this.amapInfo.zoomSize,
          Page: this.search.page,
          Size: this.search.maxSize,
        },
      });
      if (!res.errorCode) {
        // 航标获取并装换经纬度
        this.getNavaidInfo.info = res.data.result;
        for (let val of this.getNavaidInfo.info) {
          val.location = trun(val.location);
        }
      }
    },
    // 航道搜索
    async getChannelLocationFun(searchKeyWord = this.getChannelInfo.searchKeyword) {
      const { data: res } = await this.$http({
        method: 'GET',
        url: '/waterway/search',
        params: {
          'Condition.Keyword': searchKeyWord,
          'Condition.Rect.TopLeft': trun(this.amapInfo.vueMapLocation.TopLeft),
          'Condition.Rect.TopRight': trun(this.amapInfo.vueMapLocation.TopRight),
          'Condition.Rect.BottomLeft': trun(this.amapInfo.vueMapLocation.BottomLeft),
          'Condition.Rect.BottomRight': trun(this.amapInfo.vueMapLocation.BottomRight),
          'Condition.ZoomLevel': this.amapInfo.zoomSize,
          Page: this.search.page,
          Size: this.search.maxSize,
        },
      });
      if (!res.errorCode) {
        this.getChannelInfo.info = res.data.result;
        // 格式设置
        this.setChannelInfoFun();
      }
    },
    // 港口搜索
    async getPortLocationFun(searchKeyWord = this.getPortInfo.searchKeyword) {
      const { data: res } = await this.$http({
        method: 'GET',
        url: '/port/search',
        params: {
          'Condition.Keyword': searchKeyWord,
          'Condition.Rect.TopLeft': trun(this.amapInfo.vueMapLocation.TopLeft),
          'Condition.Rect.TopRight': trun(this.amapInfo.vueMapLocation.TopRight),
          'Condition.Rect.BottomLeft': trun(this.amapInfo.vueMapLocation.BottomLeft),
          'Condition.Rect.BottomRight': trun(this.amapInfo.vueMapLocation.BottomRight),
          'Condition.ZoomLevel': this.amapInfo.zoomSize,
          Page: this.search.page,
          Size: this.search.maxSize,
        },
      });
      if (!res.errorCode) {
        this.getPortInfo.info = res.data.result;
        for (const val of this.getPortInfo.info) {
          val.location = trun(val.location);
          this.$set(val, 'trunBounds', trunBounds(val.bounds));
        }

        
        // f判断当前航点是否在当前位置，，，多余
        // let vueMapLocation = this.amapInfo.vueMapLocation;
        // let isExistingArea = chartAmap.onCompleted(x =>
        //   chartAmap.isExistingArea(
        //     [
        //       this.getPortInfo.info[0].location.longitude,
        //       this.getPortInfo.info[0].location.latitude,
        //     ],
        //     [
        //       vueMapLocation.BottomRight,
        //       vueMapLocation.BottomLeft,
        //       vueMapLocation.TopLeft,
        //       vueMapLocation.TopRight,
        //     ]
        //   )
        // );
        // console.log(isExistingArea);
      }
    },
    // 请求泊位数据
    async getBerthInfoFun(id) {
      // 传入港口id
      const { data: res } = await this.$http({
        method: 'get',
        url: '/port/berths',
        params: {
          portId: id,
        },
      });
      if (!res.errorCode) {
        for (let val of res.data) {
          val.location = trun(val.location);
          val.bounds = trunBounds(val.bounds);
        }
        // 当地图显示多个港口时。但是不会显示
        // this.getBerthInfo.info.push(res.data);
        this.getBerthInfo.info = [];
        this.getBerthInfo.info.push(res.data);
      }
    },

    // 防抖搜索航标，航道，港口,泊位
    deGetNavaidLocationFun: debounce(async function(flage) {
      this.search.page = 1;
      await this.getNavaidLocationFun();

      // 根据航标点击信息加粗航道
      let navaid = this.clickNavaidInfo.info;
      let chartAmap = this.$refs.chartAmap;
      // 判断是否已经点击了 航点 或者 航线 ，在刷新时再次点击，保证页面没有变化
      if (navaid && navaid.ident) {
        chartAmap.onCompleted(x =>
          chartAmap.channelMarker(
            [navaid.location.longitude, navaid.location.latitude],
            navaid,
            true
          )
        );
      }
      // 选择后自动执行一次
      if (flage) {
        chartAmap.onCompleted(x =>
          chartAmap.setChartAmapCenter([navaid.location.longitude, navaid.location.latitude], 18)
        );
      }
    }, 300),
    deGetChannelLocationFun: debounce(async function() {
      this.search.page = 1;
      await this.getChannelLocationFun();

      // 根据航标/航道点击信息加粗航道
      let navaid = this.clickNavaidInfo.info;
      let channel = this.clickChannelInfo.info;
      let chartAmap = this.$refs.chartAmap;
      // 判断是否已经点击了 航点 或者 航线 ，在刷新时再次点击，保证页面没有变化
      if (navaid && navaid.ident) {
        chartAmap.onCompleted(x =>
          chartAmap.channelMarker(
            [navaid.location.longitude, navaid.location.latitude],
            navaid,
            true
          )
        );
      } else if (channel.length && channel[0].fixesArray.length) {
        chartAmap.onCompleted(x => chartAmap.channelStyle(channel[0].fixesArray, true));
      }
    }, 300),
    deGetPortLocationFun: debounce(async function() {
      this.search.page = 1;
      await this.getPortLocationFun();

      let amapInfo = this.amapInfo;
      let getPortInfo = this.getPortInfo;
      let getBerthInfo = this.getBerthInfo;
      // 清空一次港口信息
      getPortInfo.bounds = [];
      // getBerthInfo.info = [];
      if (getPortInfo.info.length) {
        for (let val of getPortInfo.info) {
          if (amapInfo.area < val.area * 10) {
            // 可显示港口
            getPortInfo.bounds.push(getPortInfo.info[0]);
            this.deGetBerthInfoFun(getPortInfo.bounds[0].id);
            // getPortInfo.bounds.push(val);
          }
        }
      }
      if (!getPortInfo.bounds.length) {
        this.getBerthInfo.info = [];
      }
      // 根据港口id获取泊位信息
      // if (getBerthInfo.id.length) {
      //   for (let val of getBerthInfo.id) {
      //     this.getBerthInfoFun(val);
      //   }
      // }
    }, 300),
    deGetBerthInfoFun: debounce(function(id) {
      this.getBerthInfoFun(id);
    }, 300),

    // 最优路径规划数据
    async getAutoPath(startDataId, endDataId) {
      const { data: res } = await this.$http({
        method: 'GET',
        url: '/navigation/navigatefromnavaid',
        params: {
          StartNavaidId: startDataId,
          EndNavaidId: endDataId,
        },
      });
      if (!res.errorCode) {
        if (!res.data.length) {
          this.$message.warning('没有航道可达到两点');
        } else {
          this.autoPathInfo.channel = [];
          for (let val of res.data) {
            if (val.navaid) {
              val.navaid.location = trun(val.navaid.location);
            }
          }
          this.autoPathInfo.channel = res.data;
        }
      }
    },
    // 判断其获取的信息是否直接拥有navaid
    isNavaid(data, val) {
      if (data && data.navaid) {
        return;
      } else {
        if (val && val.location) {
          this.$set(data, 'navaid', val);
        } else {
          this.$set(data, 'navaid', {
            location: { longitude: val.longitude, latitude: val.latitude },
          });
        }
      }
    },
    // 坐标获取最短路径
    async getAutoPathLocation(startData, endData, radius = this.autoPathInfo.startRadius) {
      const { data: res } = await this.$http({
        method: 'GET',
        url: '/navigation/navigate',
        params: {
          StartLocation: startData,
          EndLocation: endData,
          StartRadius: radius,
        },
      });
      if (!res.errorCode) {
        if (!res.data.length) {
          this.$message.warning('没有航道可达到两点');
        } else {
          this.autoPathInfo.channel = [];
          for (let val of res.data) {
            if (val.navaid) {
              val.navaid.location = trun(val.navaid.location);
            }
          }
          // 替换其头部和尾部
          this.autoPathInfo.channel = res.data;
          this.isNavaid(this.autoPathInfo.channel[0], this.autoPathInfo.isStartDate);
          this.isNavaid(
            this.autoPathInfo.channel[this.autoPathInfo.channel.length - 1],
            this.autoPathInfo.isEndDate
          );
        }
      }
    },

    // =======================信息获取结束============================

    // =========================信息操作============================
    // 获取信息进行航道信息设置
    setChannelInfoFun() {
      // 每次选择先清空一次
      this.getChannelInfo.channelSetView = [];
      this.getChannelInfo.clearRepeatWaypointInfor = [];
      let channelSetView = this.getChannelInfo.channelSetView;
      let clearRepeatWaypointInfor = this.getChannelInfo.clearRepeatWaypointInfor;
      for (let i in this.getChannelInfo.info) {
        // 折线二维数组
        this.$set(this.getChannelInfo.info[i], 'fixesArray', []);
        // 颜色，折线大小设置，帮助后面更改渲染
        this.$set(
          this.getChannelInfo.info[i],
          'strokeColor',
          enums.colorArray(this.getChannelInfo.info[i].ident.slice(0, 1))
        );
        this.$set(this.getChannelInfo.info[i], 'strokeWeight', '2');
        // 航道，航标删除、替换、添加判断
        this.$set(this.getChannelInfo.info[i], 'channeldelete', false);

        // 轨迹排序
        this.getChannelInfo.info[i].fixes.sort(function(a, b) {
          return a.order - b.order;
        });

        for (let x in this.getChannelInfo.info[i].fixes) {
          let fixesArrays = this.getChannelInfo.info[i].fixesArray;
          let locations = this.getChannelInfo.info[i].fixes[x];
          // 经纬度转换
          locations.navaid.location = trun(locations.navaid.location);
          // 轨迹数组创建
          this.$set(fixesArrays, fixesArrays.length, [
            locations.navaid.location.longitude,
            locations.navaid.location.latitude,
          ]);
          // 折线图层设置
          let isChannelSetView = channelSetView.some(item => {
            return (
              item[0] === locations.navaid.location.longitude &&
              item[1] === locations.navaid.location.latitude
            );
          });
          if (!isChannelSetView) {
            this.$set(channelSetView, channelSetView.length, [
              locations.navaid.location.longitude,
              locations.navaid.location.latitude,
            ]);
            this.$set(clearRepeatWaypointInfor, clearRepeatWaypointInfor.length, locations);
          }
        }
      }
    },
    // =======================信息操作结束============================

    // =========================航道操作==============================
    // 开启路径选择
    autoPathShow(flage) {
      if (flage) {
        this.autoPathInfo.dialog = true;
        this.amapInfo.isClick = true;
      } else {
        this.autoPathInfo.dialog = false;
        this.amapInfo.isClick = false;
        this.autoPathClickFalse();
      }
    },
    // 自动规划航道==起点选择
    addReouterStartClick() {
      let autoPathInfo = this.autoPathInfo;
      if (autoPathInfo.isStartIdent) {
        autoPathInfo.isStart = !autoPathInfo.isStart;
      } else {
        this.$message({
          type: 'warning',
          message: '请选择起点',
        });
      }
    },
    // 自动规划航道==终点选择
    addReouterEndClick() {
      let autoPathInfo = this.autoPathInfo;
      if (autoPathInfo.isEndIdent) {
        autoPathInfo.isEnd = !autoPathInfo.isEnd;
      } else {
        this.$message({
          type: 'warning',
          message: '请选择终点',
        });
      }
    },
    // 启动路径获取
    autoPathClickTrue() {
      // 判断是否两个按钮都确定
      if (!this.autoPathInfo.isStart) {
        this.$message.warning('请选择并确认起点航标');
      } else if (!this.autoPathInfo.isEnd) {
        this.$message.warning('请选择并确认终点航标');
      } else {
        let radius = this.autoPathInfo.startRadius;
        let startData = this.autoPathInfo.isStartDate;
        let endData = this.autoPathInfo.isEndDate;
        // 其中一个是经纬度
        if (startData.id && !endData.id) {
          this.getAutoPathLocation(
            `${startData.location.latitude},${startData.location.longitude}`,
            endData.value,
            startData.radius
          );
        } else if (!startData.id && endData.id) {
          this.getAutoPathLocation(
            startData.value,
            `${endData.location.latitude},${endData.location.longitude}`,
            radius
          );
        } else if (!startData.id && !endData.id) {
          this.getAutoPathLocation(startData.value, endData.value, radius);
        } else if (startData.id && endData.id) {
          this.getAutoPath(startData.id, endData.id);
        }
      }
    },
    // 关闭路径获取
    autoPathClickFalse() {
      let autoPathInfo = this.autoPathInfo;
      this.amapInfo.isClick = false;
      autoPathInfo.dialog = false;
      autoPathInfo.isStartDate = {};
      autoPathInfo.isEndDate = {};
      autoPathInfo.isStartIdent = '';
      autoPathInfo.isEndIdent = '';
      autoPathInfo.isStart = false;
      autoPathInfo.isEnd = false;
      autoPathInfo.channel = [];
    },
    // =======================航道操作结束==============================
  },
  created() {},
  mounted() {},
  watch: {
    // 地图变动执行
    'amapInfo.vueMapLocation': {
      handler() {
        this.deGetNavaidLocationFun();
        this.deGetChannelLocationFun();
        this.deGetPortLocationFun();
      },
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
.Chart {
  height: 100%;
  .chart_amap {
    width: 100%;
    height: calc(100% - 40px);
    position: relative;

    // 按钮操作
    .chart_amapButton {
      position: absolute;
      right: 93px;
      bottom: 10px;
    }

    //搜索用插件
    .chart_amap_getinfo {
      padding: 5px;
      box-sizing: content-box;
      position: absolute;
      width: 15%;
      min-width: 135px;
      right: 10px;
      top: 10px;
      background: #fff;
      border-radius: 4px;
    }

    // 路径规划插件
    .chart_amap_autoPath {
      position: absolute;
      bottom: 25px;
      left: 0;
      background: #fff;
      border-radius: 2px;
      padding: 4px;
      font-size: 14px;

      .chart_amap_autoPath_is {
        display: flex;
        justify-content: center;
        margin-top: 5px;
      }
    }
  }

  // 共用样式
  .button_padding {
    padding: 4px !important;
  }
}
</style>
